<template>
<div>

  <van-row>
    <van-col span="18">
      <div style="margin-top:20px;margin-bottom:10px;padding-left:10px;color:#ffffff;font-size:20px;">
        <span style="color:#ffffff;font-size:20px;">连续签到送好礼</span>
      </div>
    </van-col>

    <!-- <van-col span="6">
      <div style="margin-top:20px;margin-bottom:10px;float:right;border-radius:50px 0px 0px 50px;background-color:#FFA07A;font-size:14px;padding:5px 10px 5px 10px;">
        <span style="color:#ffffff">活动规则</span>
      </div>
    </van-col> -->
  </van-row>

  <div style="padding:10px 10px;background-color:#ffffff;border-radius:5px;margin:10px;">
    <div style="overflow:hidden;">
      <div v-for="(item, index) in steps1" :key="index">
        <div style="width:14%;float:left;text-align:center;font-size:14px;">
          <span color="#FF0000" v-if="index==active">{{item.text}}</span>
          <span color="#FF6A6A" v-if="index!=active">{{item.text}}</span>
        </div>
      </div>
    </div>

    <div style="margin-top:20px;overflow:hidden;">
      <div v-for="(item, index) in steps1" :key="index" style="text-align:center;vertical-align:middle;">
        <div style="width:14%;float:left;font-size:12px;">
          <div style="width:33%;float:left;">
            <div style="background-color:#ff0000;height:1px;margin-top:8px;" v-if="index!=0">
            </div>
            <div style="background-color:#ffffff;height:1px;margin-top:8px;" v-if="index==0">
            </div>
          </div>

          <div style="width:33%;float:left;">
            <van-icon name="checked" size="16px" v-if="(index+1)<=active" color="#FF0000" />
            <van-icon name="check" size="16px" v-if="(index+1)>active" color="#FF0000" />
          </div>

          <div style="width:34%;float:left;">
            <div style="background-color:#ff0000;height:1px;margin-top:8px;" v-if="index!=6">
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top:20px;overflow:hidden;">
      <ul class='giftBox'>
        <li v-for='(item,i) in gifts' :key='i' :class="{'active':item}">
          <van-icon name="receive-gift" color="#FF0000" style="width:14%" />
        </li>
      </ul>
    </div>

    <div style="margin-top:20px;">
      <van-button round type="danger" @click="check_in" block="true" :disabled="btn_disabled">{{btn_text}}</van-button>
    </div>
  </div>

  <div style="padding:10px 10px 10px 10px;background-color:#ffffff;border-radius:5px;margin:10px;">
    <p style="font-size:16px">签到奖励</p>
    <div v-for="(item,index) in check_ins" :key="index">
      <van-row>
        <van-col span="8">
          <span style="font-size:14px;">{{index+1}}、连签{{item.conti_check_in_day}}天</span>
        </van-col>
        <van-col span="16">
          <p v-for="(gift,i) in item.gifts" :key="i">
            <span v-if="gift.type=='money'" style="color:red;font-size:14px;">
              {{gift.name}}
            </span>
            <span v-if="gift.type=='coupon'" style="color:green;font-size:14px;">
              {{gift.name}}
            </span>
            <span v-if="gift.type=='experience'" style="color:#8DEEEE;font-size:14px;">
              {{gift.name}}
            </span>
            <span v-if="gift.type=='point'" style="color:#8A2BE2;font-size:14px;">
              {{gift.name}}
            </span>
          </p>
        </van-col>
      </van-row>
      <div style="height:1px;background-color:#c0c0c0;margin:10px 0px;"></div>

    </div>
  </div>

  <div v-if="showDialog" class="dialog-box">
    <div class="dialog-body">
      <!-- <div>
          标题
        </div>
        <div>
          内容
        </div> -->
      <div style="height:40px;line-height:40px;border-bottom: 1px solid #DBDBDB;text-align:center;">系统提示</div>
      <div style="padding: 15px 10px;font-size:14px;color:#838B83;" v-if="gift_text!=''">
        <text>{{gift_text}}</text>
      </div>
      <div>
        <button class="confirm-btn" @click="showDialog=false">确定</button>
        <!-- <button class="cancel-btn" @click="showDialog=false">取消</button> -->
      </div>
    </div>
  </div>
</div>
</template>

<script>
import {
  mapState,
  mapActions,
  mapGetters
} from 'vuex'
import api from '@/utils/api'

export default {
  data() {
    return {
      showDialog: false,
      gift_text: '',
      btn_disabled: false,
      btn_text: '签到',
      form: {
        content: ''
      },
      check_ins: [],
      steps1: [{
          text: '第1天',
          desc: '',
          show: false
        },
        {
          text: '第2天',
          desc: ''
        },
        {
          text: '第3天',
          desc: ''
        },
        {
          text: '第4天',
          desc: ''
        },
        {
          text: '第5天',
          desc: ''
        },
        {
          text: '第6天',
          desc: ''
        },
        {
          text: '第7天',
          desc: ''
        },
      ],
      gifts: [false, false, false, false, false, false, false],
      gift1: false,
      gift2: false,
      gift3: false,
      gift4: false,
      gift5: false,
      gift6: false,
      gift7: false,
      active: 0,
      desc: '123',
      currentNoteLen: 0,
      content: '',
    }
  },
  computed: {
    ...mapGetters([
      'user',
    ])
  },
  onUnLoad() {
    console.log('onUnLoad')
  },
  beforeMount() {
    console.log('beforeMount')
    if (!this.user || !this.user.id) {
      // 用户未授权
      let url = 'get_user_info?callback_url=check_in'
      wx.redirectTo({
        url: url
      })
      return
    }
    this.active = -1
    this.btn_disabled = false
    this.btn_text = "签到"
    this.showDialog = false
    this.gift_text = ''

    this.gifts = [false, false, false, false, false, false, false]
    console.log(this.gifts)
  },
  async mounted() {
    let self = this
    console.log('mounted')

    let res = await api.getUserCheckInByUserId({
      user_id: this.user.id
    })
    console.log("res", res)
    if (res.code == 0) {
      if (res.data) {
        self.active = res.data.count

        if (self.formatTime(new Date()) == self.formatTime(new Date(res.data.last_time))) {
          self.btn_text = "今日已签到"
          self.btn_disabled = true

        }
      }
    }

    let res1 = await api.findCheckIn({
      brand_id: this.user.brand_id,
      status: 'enable'
    })
    console.log(res1)
    if (res1.code == 0) {
      // console.log(11)
      if (res1.data) {

        self.check_ins = res1.data
        // let a = JSON.parse(JSON.stringify(res1.data))
        console.log('check_ins', this.check_ins)
        // console.log(22)
        // console.log(res1.data)
        res1.data.forEach(item => {
          self.gifts[item.conti_check_in_day - 1] = true

        })
        this.gifts = JSON.parse(JSON.stringify(this.gifts))
        console.log(self.gifts)
        // this.active=res1.data.data
        // console.log(this.active)
      }
    }

  },
  created() {
    console.log('created')
  },
  methods: {
    test() {

    },
    check_in() {
      let self = this
      // console.log(this.btn_disabled)
      if (this.btn_disabled) {
        return
      }
      api.userCheckIn({
        user_id: this.user.id,
      }).then(res => {
        if (res.code == 0) {
          self.btn_text = "今日已签到"
          self.btn_disabled = true
          self.active += 1

          if (res.data) {
            let array = ['签到成功，您获得以下奖励:']
            res.data.gifts.forEach(function(item, index) {
              array.push(item.name)
            })
            self.gift_text = array.join('\n')
            self.showDialog = true

            api.getUserByOpenid({
              openid: self.user.open_id
            }).then(res1 => {
              if (res1.code == 0) {
                self.$store.dispatch('setUser', res1.data)
              }
            })
          } else {
            wx.showToast({
              title: '签到成功',
              icon: 'none'
            })
          }
        }
      })
      // this.active = this.active + 1
      // console.log(this.active)
    },
    formatTime(date) {
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()

      return year + '-' + month + '-' + day
    },
    checkDate(date1, date2) {
      return this.formatTime(date1) == this.formatTime(date2)
    },
    async fetchCheckIn() {
      let self = this
      let res1 = await api.findCheckIn({
        brand_id: this.user.brand_id,
        status: 'enable'
      })
      console.log(res1)
      if (res1.code == 0) {
        console.log(11)
        if (res1.data) {
          console.log(22)
          console.log(res1.data)
          res1.data.forEach(item => {
            console.log(item.conti_check_in_day)
            // self.$set(this.)
            self.$set(self.gifts, item.conti_check_in_day, true)
            // self.gifts[item.conti_check_in_day] = true
          })
          console.log(self.gifts)
          // this.active=res1.data.data
          // console.log(this.active)
        }
      }
    },
  }
}
</script>

<style >
page {
  padding-top: 0px;
  margin-top: 0px;
  background-color: #FF7F50;
}

.giftBox {
  display: flex;
  justify-content: space-around;
  width: 98%;

}

.giftBox ._li {
  visibility: hidden;
}

.giftBox .active {
  visibility: visible;
}

.dialog-box {
  position: absolute;
  z-index: 9999;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: justify;
  background-color: rgba(0, 0, 0, 0.7);
}

.dialog-body {
  width: 80%;
  border-radius: 5px;
  /* height: auto; */
  background: #fff;
}
</style>
